<template>
  <view>
    <view class="logo-box">
      <up-image width="320rpx" height="44rpx" :show-loading="true" :src="logoCdn"></up-image>
      <text>IES智慧能源管理系统</text>
    </view>

    <view class="login-content-box">
      <up-button
        v-if="protocolChecked"
        type="primary"
        :openType="`${protocolChecked ? 'getPhoneNumber' : ''}`"
        @getphonenumber="getPhoneNumber"
        throttleTime="300"
        text="本机号码一键登陆"
      ></up-button>
      <up-button
        v-else
        type="primary"
        @click="showProtocolToast"
        throttleTime="300"
        text="本机号码一键登陆"
      ></up-button>
      <up-gap height="24rpx"></up-gap>
      <up-button
        color="#f2f2f2"
        openType="getUserInfo"
        @getuserinfo="toLoginByPhone"
        throttleTime="300"
        text="其他手机号登陆"
        customStyle="color: #d54448;"
      ></up-button>

      <view class="user-protocol-box">
        <up-checkbox-group>
          <up-checkbox
            :checked="protocolChecked"
            @change="protocolChecked = $event"
            shape="circle"
            size="28rpx"
          >
          </up-checkbox>
        </up-checkbox-group>

        <view class="protocol-text-box">
          <text>若手机号未注册将进入注册流程，注册即为同意</text>
          <text class="protocol">《用户使用协议》</text>
          <text>和</text>
          <text class="protocol">《隐私政策》</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import logoCdn from '@/static/image/logo_cdn.png'
import { ref } from 'vue';

const protocolChecked = ref(false)

const getPhoneNumber = (res) => {
  if (!protocolChecked.value) {
    uni.showToast({
      title: '请同意协议',
      icon: 'none',
      duration: 2000
    })
    return
  }
  console.log('getPhoneNumber', res);
  // uni.getPhoneNumber({
  //   success(res) {
  //     console.log(res)
  //   }
  // })
}

const showProtocolToast = () => {
  uni.showToast({
    title: '请同意协议',
    icon: 'none',
    duration: 2000
  })
}

const getuserinfo = (res) => {
  console.log('getuserinfo', res);
}

const getCode = () => {
  uni.login({
    success(res) {
      if (res.code) {
        console.log('登录成功！' + res.code)
      } else {
        console.log('登录失败！' + res.errMsg)
      }
    }
  })
}

const toLoginByPhone = () => {
  uni.navigateTo({
    url: '/pages/login/loginByPhone'
  })
}
</script>

<style lang="scss" scoped>
.logo-box {
  display: flex;
  justify-content: center;
  align-items: center;
  padding-top: 158rpx;
  flex-direction: column;

  text {
    font-size: 44rpx;
    color: $uni-text-color;
    margin-top: 30rpx;
    font-weight: block;
  }
}

.login-content-box {
  padding: 240rpx 60rpx 0 60rpx;
}

.user-protocol-box {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  padding-top: 80rpx;

  .protocol-text-box {
    padding-left: 4rpx;
    text {
      font-size: 24rpx;
      color: $uni-text-color-grey;
    }
    .protocol {
      color: $uni-color-primary;
    }
  }
}
</style>
